<template>
  <div>
    <a-descriptions bordered :column="6">
      <a-descriptions-item label="交易名称" :span="6">
        {{ transInfo.transName }}
      </a-descriptions-item>
      <a-descriptions-item label="交易码" :span="6">
        {{ transInfo.transCode }}
      </a-descriptions-item>
    </a-descriptions>
    <a-tabs>
      <a-tab-pane key="0">
        <span slot="tab"><a-icon type="tags" />输入</span>
        <a-table :columns="inputColumns" :data-source="transInfo.input">
          <a-checkbox slot="inputFlag" slot-scope="text" :defaultChecked="text" disabled></a-checkbox>
        </a-table>
      </a-tab-pane>
      <a-tab-pane key="1">
        <span slot="tab"><a-icon type="tags" />输出</span>
        <a-table :columns="columns" :data-source="transInfo.output"></a-table>
      </a-tab-pane>
      <a-tab-pane key="2">
        <span slot="tab"><a-icon type="tags" />表对象</span>
        <a-table :columns="columns" :data-source="transInfo.arrayObject"></a-table>
      </a-tab-pane>
    </a-tabs>
    <a-card>{{ transInfo.querySql }}</a-card>
  </div>
</template>

<script>
export default {
  name: 'queryInterfaceDescription',
  props: {
    transInfo: {
      type: Object
    }
  },
  data() {
    return {
      inputColumns: [
        { title: '英文名称', dataIndex: 'enName', width: 120 },
        { title: '中文名称', dataIndex: 'cnName', width: 120 },
        { title: '数据类型', dataIndex: 'dataType', width: 150 },
        { title: '是否必输', dataIndex: 'inputFlag', width: 120, scopedSlots: { customRender: 'inputFlag' } },
        { title: '查询逻辑', dataIndex: 'queryLogic', width: 800 }
      ],
      columns: [
        { title: '英文名称', dataIndex: 'enName', width: 120 },
        { title: '中文名称', dataIndex: 'cnName', width: 120 },
        { title: '数据类型', dataIndex: 'dataType', width: 150 },
        { title: '查询逻辑', dataIndex: 'queryLogic', width: 300 }
      ]
    }
  }
}
</script>

<style scoped lang="less"></style>
